<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset='utf-8' />
    <title>高德地图显示</title>
    <!--引用第三方的jQuery脚本库-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <!--引用Cesium脚本库文件-->
    <script src="./static/libs/include-cesium-local.js"></script>
    <!--引用示例页面样式表-->
    <link rel="stylesheet" href="./static/demo/cesium/style.css" />
    <script>
        //在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
        'use strict';

        //定义三维场景控件对象
        var webGlobe;
        //定义第三方图层对象
        var thirdPartyLayer;
        //定义高德图层对象
        var amapLayer;

        //加载地图
        function init() {
            //构造三维视图对象（视图容器div的id，三维视图设置参数）
            webGlobe = new Cesium.WebSceneControl('GlobeView', {});

            //构造视图功能管理对象（视图）
            var sceneManager = new CesiumZondy.Manager.SceneManager({
                viewer: webGlobe.viewer
            });
            //设置鼠标位置信息展示控件：经纬度、高程、视角高度（容器div的id）
            sceneManager.showPosition('coordinate_location');

            //构造第三方图层对象
            thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({
                viewer: webGlobe.viewer
            });
            //加载高德地图
            amapLayer = thirdPartyLayer.appendGaodeMap({
                //地图类型：矢量：'vec'、影像：'img'、道路：'road'
                ptype: 'vec'
            });
        }

        /**图层切换函数*/
        function changeLayer() {
            var layer = document.getElementById("LayerSelect").value;
            //首先移除图层
            if (amapLayer) {
                thirdPartyLayer.removeImageLayer(amapLayer);
            }
            //根据选择添加地图
            if (layer == 'vec') {
                amapLayer = thirdPartyLayer.appendGaodeMap({
                    //地图类型：矢量：'vec'、影像：'img'、道路：'road'
                    ptype: 'vec'
                });
            } else if (layer == 'img') {
                amapLayer = thirdPartyLayer.appendGaodeMap({
                    //地图类型：矢量：'vec'、影像：'img'、道路：'road'
                    ptype: 'img'
                });
            } else if (layer == 'raod') {
                amapLayer = thirdPartyLayer.appendGaodeMap({
                    //地图类型：矢量：'vec'、影像：'img'、道路：'road'
                    ptype: 'road'
                });
            }
        }
    </script>
</head>

<body onload="init()">
    <!--三维场景容器-->
    <div id='GlobeView'>
        <div class="message">
            <select name="changeLayer" id="LayerSelect" onchange="changeLayer()">
                <option value="vec">矢量地图</option>
                <option value="img">影像地图</option>
                <option value="raod">道路地图</option>
            </select>
        </div>
    </div>
    <!--位置信息容器-->
    <div id="coordinateDiv" class="coordinateClass">
        <label id="coordinate_location"></label>
    </div>
</body>

</html>